<script lang="ts" setup>
import {computed} from 'vue';

const {animationDuration = 2, animationIterationCount = 'infinite'} =
    defineProps<{
      // 动画持续时间，单位秒
      animationDuration?: number;
      // 动画是否只执行一次
      animationIterationCount?: 'infinite' | number;
    }>();

const style = computed(() => {
  return {
    animation: `shine ${animationDuration}s linear ${animationIterationCount}`,
  };
});
</script>
<template>
  <div :style="style" class="jcx-spine-text !bg-clip-text text-transparent">
    <slot></slot>
  </div>
</template>
<style>
.jcx-spine-text {
  background: radial-gradient(circle at center, rgb(255 255 255 / 80%), #f000) -200% 50% /
      200% 100% no-repeat,
  #000;

  /* animation: shine 3s linear infinite; */
}

.dark .jcx-spine-text {
  background: radial-gradient(circle at center, rgb(24 24 26 / 80%), transparent) -200% 50% / 200% 100% no-repeat,
  #f4f4f4;
}

@keyframes shine {
  0% {
    background-position: 200% 0%;
  }

  100% {
    background-position: -200% 0%;
  }
}
</style>
